<template>
  <div>
<my-header title="我的订单" @onClickLeft="$router.push('/my')"/>
    <div class="address">
    <p class="goodsaddress">收货地址：</p>
    <p>{{infoList.shouhuodizhi}}</p>
    <div><p class="lian-ren">联系人：{{infoList.lianxiren}}</p><p class="lian-hua">联系电话：{{infoList.lianximobile}}</p></div>
    </div>
<div v-for="(text,index) in list" :key='index' class="dian-pu">
<van-row class="dianpu-message">
  <van-col span="5">
      <div class="image"><img :src="text.avatar" alt=""></div>
      <div>ID:56456485</div>
  </van-col>
  <van-col span="14" offset="1">
      <h5>{{text.storeName}}</h5>
       <p class="lian-hua">{{text.storeMobile}}</p><p class="lian-ren">距离：{{text.distance}}m</p>
      <van-icon name="location" color="#0039fd"/><span>{{text.storeAddress}}</span>
    </van-col>
</van-row>
<div v-for='(item,index) in infoList.goods' :key='index'>
  <van-row class="xuan-gou" >
    <van-col span="4" class="xuan-gou1"><p>选购商品</p><div class="tupian"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.99114.com%2Fgroup1%2FM00%2F0B%2F5C%2FwKgGS1jB_NWAKoBhAAjSFh9HBj4055.jpg&refer=http%3A%2F%2Fimg1.99114.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617881512&t=755c64f9836daa6579d9b2f6fcca17bd" alt=""></div></van-col>
    <van-col span="10" class="xuan-gou2"><p>{{item.gondsname}}</p></van-col>
    <van-col span="3" class="xuan-gou3"><p>x1</p></van-col>
    <van-col span="4" class="xuan-gou4"><p>￥{{item.goodsprice}}</p></van-col>
  </van-row>
</div>
<div class="jiesuan">
 <van-cell title="包装" :value="text.baozhuangfei" />
    <van-cell title="活动优惠" value="满50-2 -￥2" />
    <!-- 优惠券单元格 -->
    <van-coupon-cell
      :coupons="coupons"
      :chosen-coupon="chosenCoupon"
      @click="showList = true"
    />
    <van-cell title="配送费" :value="text.peisongfei" />
    <van-cell title="小计" :value="xiaoji(text)" />
    </div>
  </div>
  <van-tabbar v-model="active">
  <van-tabbar-item >合计</van-tabbar-item>
  <van-tabbar-item >￥143.2</van-tabbar-item>
  <van-tabbar-item ><van-button type="primary" @click="payWeChat()">确认支付 (微信支付)</van-button></van-tabbar-item>
</van-tabbar>
  </div>
</template>

<script>
import { orderIfom } from '@/api/my-liang'
import { mapState, mapMutations } from 'vuex'
import MyHeader from '../components/my-header.vue'
export default {
  name: '',
  components: {
    MyHeader
  },
  props: {},
  data () {
    return {
      coupons: [],
      chosenCoupon: '',
      active: 1,
      infoList: {},
      qian: 0,
      xj: 0,
      zongj: 0
    }
  },
  computed: {
    ...mapState('m_liang', ['list'])
  },
  watch: {},
  created () {
    this.getInfo()
    // 在页面加载时读取sessionStorage里的状态信息
    // this.list = JSON.parse(window.sessionStorage.getItem('list'))
    // this.savelist(this.list)
    // 在页面刷新时将vuex里的信息保存到sessionStorage里
    // window.addEventListener('beforeunload', () => {
    // })
  },
  mounted () {
    this.zongji()
    // this.gett()
  },
  beforeupdate () {
    // this.$router.go(-1)
    // console.log(this.list)
    window.sessionStorage.setItem('list', JSON.stringify(this.list))
  },
  methods: {
    payWeChat() {
      this.$toast({
        message: '支付中...',
        icon: 'chat-o'
      })
      setTimeout(() => {
        this.$toast.success('支付成功')
        this.$router.push('/layout')
      }, 2000)
    },
    ...mapMutations('m_liang', ['savelist']),
    async getInfo () {
      try {
        const { data } = await orderIfom()
        this.infoList = data.data
        // console.log(this.infoList)
      } catch (error) {
        this.$toast('获取数据失败，请稍后再试')
      }
    },
    xiaoji (text) {
      this.xj = 0
      // console.log(this.infoList.goods)
      // this.infoList.goods.forEach(item => {
      //   this.xj += item.goodsprice
      // })
      // this.xj += 4
      // text.xiji = this.xj
      // return '￥' + 143.2
      // for (var i = 0; i < this.infoList.goods; i++) {
      //   console.log(this.infoList.goods.goodsprice)
      //   this.qian += this.infoList.goods.goodsprice
      // }
      // this.qian = this.qian + 2 + 2
    },
    zongji () {
      // this.zongj = 0
      // console.log(this.list)
      var zj = 0
      this.list.forEach(item => {
        zj += item.xiji
        // console.log(item)
        // console.log(111)
        // this.zongj += parseFloat(this.xiaoji().substring(1))
      })
      return zj
    }
    // gett () {
    //   this.zongj = 0
    //   this.list.forEach(item => {
    //     console.log(111)
    //     this.zongj += 1
    //     // console.log(this.xiaoji())
    //   })
    //   // console.log(this.xiaoji())
    // }
  }
}
</script>

<style scoped lang="less">
  /deep/.van-icon::before{
    font-size: 40px;
    font-weight: 700;
    color: #333 ;
}
.van-hairline--bottom::after{
    border-bottom: 1px solid #02b6fd;
}
.address{
    border-bottom: 1px solid #02b6fd;
    overflow: hidden;
    p{
        margin: 5px;
        padding: 0 60px ;
        font-size: 28px;
    }
    .goodsaddress{
      padding: 0 10px;
    }
    .lian-ren{
        float: left;
    }
    .lian-hua{
        float: left;
    }
}
 .dianpu-message{
        font-size: 28px !important;
        border-bottom: 2px solid #02b6fd;
        .image{
            border-radius: 50%;
            border: 4px solid #02b6fd;
            width: 100px;
            height: 100px;
            overflow: hidden;
            margin: 35px 20px 5px;
            img {
              width: 100%;
              height: 100%;
            }
        }
        // img{
        //     width: 100px;
        //     height: 100px;
        // }
        // .lian-hua,.lian-ren{
        //   float: left;
        // }
        h5{
            margin: 20px 0 5px 0;
        }
        p{
            margin: 5px 0;
        }
    }
    .xuan-gou{
        font-size: 28px;
        border-bottom: 2px solid #02b6fd;
        .xuan-gou1{
            margin: 20px 30px 20px 40px ;
        }
        .xuan-gou2,.xuan-gou3,.xuan-gou4{
            margin-top: 90px;
        }
        .tupian{
            width: 100px;
            height: 100px;
            background: #169bd5;
            margin-top:-20px ;
            img {
              width: 100%;
              height: 100%;
            }
        }
    }
    .jiesuan{
        .van-cell{
            border-bottom: 2px solid #02b6fd;
        }
    }
    .dian-pu {
      margin-bottom: 90px;
      border-top: 2px solid #02b6fd;
    }
</style>
